<template>
<div>
	<div class="row"><div class="col-xs-12">
		<button :disabled="data.length ? false : true" class="btn btn-success" @click="_export">Export</button>
	</div></div>
	<div class="row"><div class="col-xs-12">
		<div class="table-responsive">
			<table id="formats-table">
			  <tr align="center">
			    <th>名次</th>
			    <th>姓名</th>
			    <th>成绩</th>
			  </tr>
			  <tr align="center">
			    <td>1</td>
			    <td>小明</td>
			    <td>100</td>
			  </tr>
			  <tr align="center">
			    <td>2</td>
			    <td>小红</td>
			    <td>95.5</td>
			  </tr>
			</table>

			<!-- <table class="table table-striped">
				<thead><tr>
					<th v-for="c in cols" :key="c.key">{{c.name}}</th>
				</tr></thead>
				<tbody>
					<tr v-for="(r, key) in data" :key="key">
						<td v-for="c in cols" :key="c.key"> {{ r[c.key] }}</td>
					</tr>
				</tbody>
			</table> -->
		</div>
	</div></div>
</div>
</template>

<script>
const _XLSX = require('xlsx');
import FileSaver from 'file-saver'

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

export default {
	data() {
		return {
			data: ["SheetJS2".split(""), "1234567中".split("")]
		}; 
	},
	mounted () {
      	this.$emit('loaded',false)
    },
	methods: {
		_export(evt) {
			/* convert state to workbook */
			var table = document;
			const ws = _XLSX.utils.table_to_sheet(table);
			const wb = _XLSX.utils.book_new();
			_XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
			/* generate X file */
			const wbout = _XLSX.write(wb, {type:"binary", bookType:"xlsx"});
			/* send to client */
			FileSaver.saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "sheetjs.xlsx");
		},
	}
};
</script>